<template>
    <div class="login-wrap">
        <div class="demo-ruleForm login-container">
            <h2>用户登录</h2>
            <el-form label-position="left" ref="loginForm" label-width="0px" v-model="loginForm">
                <el-form-item prop="name" style="margin-top: 40px;">
                    <el-input type="text" auto-complete="off" placeholder="用户名" v-model="loginForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" auto-complete="off" placeholder="密码" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button type="primary" style="width:100%;" @click="login">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    import * as $api from '../api/Apis'

    export default {
        name: "login",
        data(){
            return {
                loginForm:{
                    name:'',
                    password:''
                },
                // 登录表单校验
                loginFormRules: {

                }
            }
        },
        methods:{
            login(){
                let formData = {
                    name:this.loginForm.name,
                    password:this.loginForm.password
                };
                console.log(formData);
                let that = this;
                $api.login(formData).then( res => {
                    console.log(res);
                    if( res.code === 200 ){
                        window.localStorage.setItem('uid',res.data.uid);
                        window.localStorage.setItem('userInfo',JSON.stringify(res.data));
                        setTimeout(function () {
                            that.$router.push({path:'/index'});
                        },1000);
                    }else {
                        this.$message.error(res.message);
                    }
                }).catch( err => {
                    console.log(err);
                });
            }
        },
        mounted() {

        },
        created() {

        }
    }
</script>

<style scoped>
    .login-wrap {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        background-image: url();
        /* background-color: #112346; */
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;
    }

    .login-container {
        border-radius: 10px;
        margin: 0px auto;
        width: 350px;
        padding: 30px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        text-align: left;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    }

</style>
